Examples

Embedded images

The following online image in your markdown source will be embedded in the generated html with Base64

Homer Simpson

The following local image in your markdown source will be embedded in the generated html Homer Simpson

Some text with LaTeX-like formulae using KaTeX

Surround your LaTeX with a single $ on each side for inline rendering. Use two $ for block rendering. This mode uses bigger symbols and centres the result.

This is an inline LaTeX-like formula c=memodnc=m^e \mod n describing textbook RSA encryption.

And this is a block formula:

f(x)=f^(ξ)e2πiξxdξf(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi

Highlighted code

The following code will be highlighted with highlight.js. Default style is 'vs2015' but you can choose any highlight.js style passing the name to the command with --highlightjs-style <stylename>.

'use strict'

const mdChords = require('markdown-it')({ breaks: true }).use(require('markdown-it-chords'))

module.exports = function chords (md) {
  const defaultRender = md.renderer.rules.fence

  md.renderer.rules.fence = function (tokens, idx, options, env, self) {
    const token = tokens[idx]

    if (token.tag === 'code' && token.info === 'song') {
      return `<div class="song">${mdChords.render(token.content)}</song>`
    }

    // pass token to default renderer.
    return defaultRender(tokens, idx, options, env, self)
  }
}

Song lyrics with chords

You can also render songs (lyrics with chords) using markdown-it-chords. For compatibility reasons, only songs in fenced code blocks with language song will be rendered.

CDo, a deer, a female deer
DmRay, a drop of golden sun
E♭May, a possiD♯bility
D/F♯Fee, the price you pay to run

(half-time, bossanova guitar)
913So, — I'd C6like to see BraFmaj9zil . . . . .F6(9)
E‑7♭13La, — I'd CM7sus2really like to E9go . . .E7♭9
AmΔ7/9Tea, — I A‑7sit and sip so D♯ø7slow . . .D♯°7
That will Dm7 5fr
  ̶● ̶ ̶ ̶ ̶ ̶
 ‖̶ ̶|̶●|̶ ̶|̶
 ‖̶●|̶ ̶|̶ ̶|̶
 ‖̶ ̶|̶ ̶|̶●|̶
 ‖̶●|̶ ̶|̶ ̶|̶
x ̶ ̶ ̶ ̶ ̶ ̶ ̶
bring — F6(9) 7fr
  ̶ ̶ ̶● ̶ ̶ ̶
 ‖̶ ̶|̶●|̶ ̶|̶
 ‖̶●|̶ ̶|̶ ̶|̶
 ‖̶●|̶ ̶|̶ ̶|̶
 ‖̶ ̶|̶●|̶ ̶|̶
x ̶ ̶ ̶ ̶ ̶ ̶ ̶
us —— Em7 7fr
  ̶● ̶ ̶ ̶ ̶ ̶
 ‖̶ ̶|̶●|̶ ̶|̶
 ‖̶●|̶ ̶|̶ ̶|̶
 ‖̶ ̶|̶ ̶|̶●|̶
 ‖̶●|̶ ̶|̶ ̶|̶
x ̶ ̶ ̶ ̶ ̶ ̶ ̶
back — G13 10fr
  ̶ ̶ ̶ ̶ ̶● ̶
 ‖̶ ̶|̶ ̶|̶●|̶
 ‖̶ ̶|̶ ̶|̶●|̶
x‖̶ ̶|̶ ̶|̶ ̶|̶
 ‖̶●|̶ ̶|̶ ̶|̶
x ̶ ̶ ̶ ̶ ̶ ̶ ̶
to ——  7fr
  ̶● ̶ ̶ ̶ ̶ ̶
 ‖̶ ̶|̶●|̶ ̶|̶
 ‖̶ ̶|̶ ̶|̶●|̶
x‖̶ ̶|̶ ̶|̶ ̶|̶
x‖̶ ̶|̶ ̶|̶ ̶|̶
  ̶ ̶ ̶● ̶ ̶ ̶
Do . . . . 3fr
  ̶● ̶ ̶ ̶ ̶ ̶
 ‖̶●|̶ ̶|̶ ̶|̶
 ‖̶●|̶ ̶|̶ ̶|̶
 ‖̶ ̶|̶ ̶|̶●|̶
 ‖̶ ̶|̶ ̶|̶●|̶
  ̶● ̶ ̶ ̶ ̶ ̶

  ̵● ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶
x‖̵ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶
 ‖̵ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶●|̶
 ‖̵ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶●|̶ ̶|̶ ̶|̶
 ‖̵ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶●|̶ ̶|̶ ̶|̶ ̶|̶ ̶|̶
  ̵ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶
asd